<template>
 <div id="app">
  <nav>
    <!-- 导航按钮 -->
    <button
    :class="{ active: currentView === 'Game' }"
    @click="currentView = 'Game'"
     >
 Game
</button>
 
<button

:class="{ active: currentView === 'ToDoList' }"
@click="currentView = 'ToDoList'"
>
 To-Do List
 </button>
 </nav>
 <!-- 动态组件 -->
 <div class="content">
 <component :is="currentView" />
 </div>
 </div>
</template>

<script>
import Game from './components/game.vue';
import ToDoList from './components/todo-list.vue';

export default {
 name: 'App',
 components: {
 Game,
 ToDoList,
 },
 data() {
 return {
 currentView: 'Game', // 默认显示 Game 组件
 };
 },
};
</script>
<style>
#app {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  color: #333333;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

nav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button.active {
  background-color: #e0e0e0;
}

button:hover {
  background-color: #d0d0d0;
}

.content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>